<template>
  <div>
    <div class="header">
      <el-button type="danger" link @click="handleCalculate">
        <el-icon><Cpu /></el-icon>
        <span>计算</span>
      </el-button>
      <el-button type="danger" link @click="areaResult = []">
        <el-icon><RefreshLeft /></el-icon>
        <span>清除</span>
      </el-button>
      <el-button type="info" link>
        <el-icon><Timer /></el-icon>
        <span>{{ computeTime }}ms</span>
      </el-button>
      <el-button type="info" link>
        <el-icon><Document /></el-icon>
        <span>{{ dataSize }}kb</span>
      </el-button>
      <el-radio-group v-model="showSelect" v-if="dataSize > 0" size="small">
        <el-radio-button :value="'area'">空域计算结果</el-radio-button>
        <el-radio-button :value="'sector'">扇区计算结果</el-radio-button>
        <el-radio-button :value="'policy'">扇区建议结果</el-radio-button>
        <!-- <el-radio-button :value="'raw'">源数据</el-radio-button> -->
      </el-radio-group>
    </div>
    <el-scrollbar :height="contentHeight" :min-height="contentHeight">
      <AreaResultView
        :data="areaResult"
        :moments="data.moments"
        v-if="showSelect == 'area'"
      />
      <SectorResultView
        :data="sectorResult"
        :moments="data.moments"
        v-if="showSelect == 'sector'"
      />
      <PolicyResultView
        :data="policyResult"
        :moments="data.moments"
        v-if="showSelect == 'policy'"
      />
      <!-- <RawDataView
        :data="[
          areaResult.map((res) => ({ id: res.id, summary: res.summary })),
          sectorResult,
          policyResult,
        ]"
        v-if="showSelect == 'raw'"
      /> -->
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import axios from "axios";
import dayjs from "dayjs";

import useFlowStore from "@/store/flow.js";
import useCommonStore from "@/store/common.js";
import useCEMStore from "@/store/CEM.js";

import areaCompute from "./areaCompute.js";
import sectorCompute from "./sectorCompute.js";
import policyCompute from "./policyCompute.js";

import RawDataView from "./rawDataView.vue";
import AreaResultView from "./areaResultView.vue";
import SectorResultView from "./sectorResultView.vue";
import PolicyResultView from "./policyResultView.vue";

const flowStore = useFlowStore();
const commonStore = useCommonStore();
const CEMStore = useCEMStore();

const data = computed(() => ({
  raw: flowStore.rawData,
  tags: flowStore.tags,
  begin: flowStore.begTime,
  areas: CEMStore.areas,
  sectors: CEMStore.sectors,
  length: flowStore.rawData.length,
  moments: new Array(flowStore.rawData.length).fill("").map((v, i, a) =>
    dayjs(flowStore.begTime)
      .add(15 * i, "minute")
      .format("HH:mm")
  ),
}));

const showSelect = ref("area");
const areaResult = ref([]);
const policyResult = ref([]);
const sectorResult = ref([]);
const computeTime = ref(0);
const dataSize = computed(() =>
  Math.round(
    (JSON.stringify(areaResult.value).length +
      JSON.stringify(sectorResult.value).length +
      JSON.stringify(policyResult.value).length) /
      1000
  )
);

const handleCalculate = () => {
  computeTime.value = 0;
  let t0 = new Date().getTime();
  // areaCompute({ raw, tags, begin, areas, sectors })
  // sectorCompute({ areaResult, length, begin, sectors })
  let r1 = areaCompute(data.value);
  let r2 = sectorCompute({ areaResult: r1, ...data.value });
  let r3 = policyCompute(r2, data.value.length);
  areaResult.value = r1;
  sectorResult.value = r2;
  policyResult.value = r3;
  let t1 = new Date().getTime();
  computeTime.value = t1 - t0;
  // console.log(areaResult.value);
  // console.log(sectorResult.value);
};

const contentHeight = computed(() => commonStore.clientHeight - 190 + "px");
</script>

<style scoped>
.scroller {
  height: 100%;
}

.header {
  padding: 0 0 12px 36px;
  display: flex;
  align-items: center;
}

.header > * {
  margin-right: 36px;
}
</style>
